<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 需求, 有一个东西需要两个异步请求都完成的时候才能执行
    // 用普通的写法
    // 思路是利用第三变量来确定请求是否完成
    // 定义一个函数, 在执行函数内容之前先判断两个请求是否完成
    let result1 = false;
    let result2 = false;
    $.ajax({
      url: "url1",
      type: "get",
      success(data) {
        result1 = true;
        resulthandle();
      }
    })
    $.ajax({
      url: "url2",
      type: "get",
      success(data) {
        result2 = true;
        resulthandle();
      }
    })

    function resulthandle() {
      if (result1 && result2) {
        // 执行需求的操作
      }
    }

    // 如果使用Promise中的all方法可以轻松完成这个需求
    // Promise.all() 方法要求传入一个数组, 这个数组包含你想要进行的异步操作
    // 当数组中的异步操作都完成的时候会调用then回调函数, 这个then中传入一个函数, 函数中又一个参数
    // 这个函数的参数是一个数组, 数组中包含的是异步操作中返回的data数据
    // 如果有异步请求失败的话, 就会进入catch回调函数
    Promise.all([
      new Promise((resolve, reject) => {
        $.ajax({
          url: "url1",
          type: "get",
          success(data1) {
            resolve(data1)
          }
        })
      }),
      new Promise((resolve, reject) => {
        $.ajax({
          url: "url2",
          type: "get",
          success(data2) {
            resolve(data2)
          }
        })
      })
    ]).then((result) => {
      console.log(result); // 这个result就是一个数组, 数组中是异步操作中返回的数据data
    }).catch((err) => {
      console.log(err); // 如果有异步操作失败的话, 就会进入catch, err是返回的错误信息
    })

    Promise.all([
      new Promise((resolve, reject) => {
        setTimeout(() => {
          reject("nonono")
          // resolve({
          //   name: "xiaoLam",
          //   age: 22
          // })
        }, 2000)
      }),
      new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve({
            name: "solaire",
            age: "54"

          })
        })
      })
    ]).then((result) => {
      console.log(result);
    }).catch((err) => {
      console.log(err);
    })
  </script>
</body>

</html>